<template>
	<view>
		<view class="coupon-nav">
			<view :class="{'muted':type!=1}" class="coupon-nav-cell" @click="onChange(1)">已失效优惠券</view>
			<view :class="{'muted':type!=2}" class="coupon-nav-cell" @click="onChange(2)">已用优惠券</view>
		</view>
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="coupon-list bg-white" v-if="couponList.length>0">
				<coupon-list :list="couponList" :btn-type="2" @refresh="refresh"></coupon-list>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import {
		getMyCouponList
	} from "@/api/activity";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				type: 1,
				upOption: {
					empty: {
						icon: "/static/images/coupon_null.png",
						tip: "暂无优惠券",
					},
				},
				couponList: [],
			};
		},

		methods: {
			onChange(index) {
				this.type = index
				this.upCallback({
					size: 10,
					num: 1
				});
			},
			downCallback() {
				this.upCallback({
					size: 10,
					num: 1
				});
			},
			upCallback(page) {
				getMyCouponList({
					page_size: page.size,
					page_no: page.num,
					use_status: this.type == 1 ? 2 : 1
				}).then(({
					data
				}) => {
					if (page.num == 1) this.couponList = [];
					let curPageData = [];
					for (let i = 0; i < data.lists.length; i++) {
						curPageData.push(data.lists[i])
					}
					const curPageLen = curPageData.length;
					const hasNext = !!data.more;
					this.couponList = this.couponList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				}).catch(() => {
					this.mescroll.endErr();
				});
			},
			refresh() {
				this.couponList = []; // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll(); // 再刷新列表数据
			},
		}
	};
</script>
<style lang="scss">
	.coupon-nav {
		display: flex;
		height: 80rpx;
		padding-top: 10rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: center;

		.coupon-nav-cell {
			width: 50%;
		}
	}

	.coupon-list {
		margin: 20rpx;
		padding: 25rpx;
		border-radius: 16rpx;
	}
</style>